// // meteorEffect.js
// export function initMeteorEffect(canvasId,count=1) {
//   // 获取 canvas 元素和其上下文
//   const can=document.getElementById(canvasId);
//   const ctx=can.getContext('2d');

//   // 设置 canvas 的宽度和高度为浏览器窗口大小
//   let w=can.width=window.innerWidth;
//   let h=can.height=window.innerHeight;

//   let drops=[];  // 存储所有流星对象

//   // 当窗口大小发生变化时，更新 canvas 尺寸
//   window.onresize=function() {
//     w=can.width=window.innerWidth;
//     h=can.height=window.innerHeight;
//   };

//   // 流星的构造函数
//   function Drop() {}

//   Drop.prototype={
//     // 初始化流星的属性
//     init: function() {
//       this.x=random(0,w);  // x 坐标
//       this.y=0;  // y 坐标从顶部开始
//       this.r=1;  // 初始半径
//       this.color='white';  // 默认颜色为白色
//       this.vy=random(1,2);  // y 轴速度
//       this.vr=1;  // 半径增长速度
//       this.a=1;  // 初始透明度
//       this.va=0.96;  // 每次透明度衰减的比例
//       this.l=random(h*0.9,h*1);  // 流星消失的 y 轴位置
//     },
//     // 绘制爆炸流星
//     draw: function() {
//       if(this.y>this.l) {
//         // 在流星未达到目标高度时，绘制圆形流星
//         ctx.beginPath();
//         ctx.arc(this.x,this.y,this.r/2,0,2*Math.PI,false); //爆炸流星大小
//         ctx.strokeStyle='rgba(255,255,255,'+this.a+')';  // 使用带透明度的流星颜色
//         ctx.stroke();
//       } else {
//         // 在流星达到目标位置后，绘制矩形流星
//         ctx.fillStyle=color(this.a);  // 根据透明度调整颜色
//         ctx.fillRect(this.x,this.y,2,5);  // 绘制矩形
//       }
//       this.update();  // 更新流星位置和状态
//     },
//     // 更新流星的状态
//     update: function() {
//       if(this.y<this.l) {
//         // 如果流星还没有到达目标位置，继续下落
//         this.y+=this.vy;
//       } else {
//         // 如果流星到达目标位置，变大并逐渐消失
//         if(this.a>0.03) {
//           this.r+=this.vr;  // 增大流星的半径
//           if(this.r>50) {
//             this.a*=this.va;  // 衰减流星的透明度
//           }
//         } else {
//           // 如果透明度小于 0.03，重新初始化流星
//           this.init();
//         }
//       }
//     }
//   };

//   // 每一帧的动画处理函数
//   function move() {
//     // 在每一帧清除画布内容，创造流星运动的效果
//     ctx.fillStyle='rgba(0,0,0,.1)';
//     ctx.fillRect(0,0,w,h);  // 轻微的黑色透明背景，使流星看起来像在夜空中运动
//     for(let i=0;i<drops.length;i++) {
//       drops[i].draw();  // 绘制每一个流星
//     }
//     // 请求下一帧动画，实现流星效果的不断循环
//     requestAnimationFrame(move);
//   }

//   // 初始化流星对象并添加到流星数组中
//   function setup() {
//     for(let i=0;i<count;i++) {
//       (function(j) {
//         setTimeout(function() {
//           const drop=new Drop();  // 创建一个新的流星对象
//           drop.init();  // 初始化流星
//           drops.push(drop);  // 添加到流星数组中
//         },j*200);  // 设置流星出现的间隔
//       })(i);  // 将当前索引传入闭包
//     }
//   }

//   // 随机生成指定范围内的数值
//   function random(min,max) {
//     return Math.random()*(max-min)+min;
//   }

//   // 生成随机颜色，返回 rgba 格式的颜色值
//   function color(a) {
//     const r=255;
//     const g=255;
//     const b=255;
//     return 'rgba('+r+','+g+','+b+','+a+')';  // 生成随机的 RGB 颜色值，并结合透明度 a
//   }

//   // 启动流星雨效果
//   setup();
//   move();
// }


// meteorEffect.js
export function initMeteorEffect(canvasId,count=1) {
  // 获取 canvas 元素和其上下文
  const can=document.getElementById(canvasId);
  const ctx=can.getContext('2d');

  // 设置 canvas 的宽度和高度为浏览器窗口大小
  let w=can.width=window.innerWidth;
  let h=can.height=window.innerHeight;

  let drops=[];  // 存储所有流星对象

  // 当窗口大小发生变化时，更新 canvas 尺寸
  window.onresize=function() {
    w=can.width=window.innerWidth;
    h=can.height=window.innerHeight;
  };

  // 流星的构造函数
  function Drop() {}

  Drop.prototype={
    // 初始化流星的属性
    init: function() {
      this.x=random(0,w);  // x 坐标
      this.y=0;  // y 坐标从顶部开始
      this.r=1;  // 初始半径
      this.color='white';  // 默认颜色为白色
      this.vx=random(-2,2);  // x 轴速度, 使流星有水平偏移
      this.vy=random(1,3);  // y 轴速度
      this.vr=1;  // 半径增长速度
      this.a=1;  // 初始透明度
      this.va=0.96;  // 每次透明度衰减的比例
      this.l=random(h*0.9,h*1);  // 流星消失的 y 轴位置
    },
    // 绘制爆炸流星
    draw: function() {
      if(this.y>this.l) {
        // 在流星未达到目标高度时，绘制圆形流星
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r/2,0,2*Math.PI,false); //爆炸流星大小
        ctx.strokeStyle='rgba(255,255,255,'+this.a+')';  // 使用带透明度的流星颜色
        ctx.stroke();
      } else {
        // 在流星达到目标位置后，绘制矩形流星
        ctx.fillStyle=color(this.a);  // 根据透明度调整颜色
        ctx.fillRect(this.x,this.y,2,5);  // 绘制矩形
      }
      this.update();  // 更新流星位置和状态
    },
    // 更新流星的状态
    update: function() {
      if(this.y<this.l) {
        // 如果流星还没有到达目标位置，继续下落
        this.x+=this.vx;  // 更新 x 坐标
        this.y+=this.vy;  // 更新 y 坐标
      } else {
        // 如果流星到达目标位置，变大并逐渐消失
        if(this.a>0.03) {
          this.r+=this.vr;  // 增大流星的半径
          if(this.r>50) {
            this.a*=this.va;  // 衰减流星的透明度
          }
        } else {
          // 如果透明度小于 0.03，重新初始化流星
          this.init();
        }
      }
    }
  };

  // 每一帧的动画处理函数
  function move() {
    // 在每一帧清除画布内容，创造流星运动的效果
    ctx.fillStyle='rgba(0,0,0,.1)';
    ctx.fillRect(0,0,w,h);  // 轻微的黑色透明背景，使流星看起来像在夜空中运动
    for(let i=0;i<drops.length;i++) {
      drops[i].draw();  // 绘制每一个流星
    }
    // 请求下一帧动画，实现流星效果的不断循环
    requestAnimationFrame(move);
  }

  // 初始化流星对象并添加到流星数组中
  function setup() {
    for(let i=0;i<count;i++) {
      (function(j) {
        setTimeout(function() {
          const drop=new Drop();  // 创建一个新的流星对象
          drop.init();  // 初始化流星
          drops.push(drop);  // 添加到流星数组中
        },j*200);  // 设置流星出现的间隔
      })(i);  // 将当前索引传入闭包
    }
  }

  // 随机生成指定范围内的数值
  function random(min,max) {
    return Math.random()*(max-min)+min;
  }

  // 生成随机颜色，返回 rgba 格式的颜色值
  function color(a) {
    const r=255;
    const g=255;
    const b=255;
    return 'rgba('+r+','+g+','+b+','+a+')';  // 生成随机的 RGB 颜色值，并结合透明度 a
  }

  // 启动流星雨效果
  setup();
  move();
}
